<template>
	<Modal :show="visible" @onClose="close" :clickMaskClose="true">
		<view class="vip" @click="jump"></view>
		<slot slot="close">
			<view class="close-icon" @click="close"></view>
		</slot>
	</Modal>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import Modal from '@/components/modal/index.vue'
	const emit = defineEmits(['onDestroy'])
	
	interface GiveVipProps{
		show: boolean
	}
	const props = withDefaults(defineProps<() => GiveVipProps>(), {
		show: false
	})
	const visible = computed(() => props.show)
	
	const close = () => {
		emit('onDestroy')
	}
	
	const jump = () => {
		close()
		uni.switchTab({
			url:"/pages/tabbar/vip/index"
		})
	}
		
</script>

<style scoped lang="scss">
	.give-vip-component{
		
	}
	
	.vip{
		width: 682upx;
		height: 868upx;
		background: url("/static/images/global-notice/song_vip.png") 0 0 no-repeat;
		background-size: cover
	}
	
	
	.close-icon{
		position: absolute;
		bottom: 100upx;
		width:68upx;
		height: 68upx;
		background:url("/static/images/global-notice/close.png") 0 0 no-repeat;
		background-size: cover;
	}
</style>